@total-width: 960px;
html {
    background-color: @col-complementary-1;
    color: @col-font-on-page;
    font-size: 1em;
    line-height: 1.1em;
	overflow-y: scroll;
	overflow: -moz-scrollbars-vertical;
}
body 
{
	.center-block();
    max-width: @total-width;
}
#hdr-logo (@header-color) when (lightness(@header-color) >= 50%) 
{
	background: transparent url(./Images/logo-onlightbg.png) no-repeat center;
}
#hdr-logo (@header-color) when (lightness(@header-color) < 50%) 
{
	background: transparent url(./Images/logo-ondarkbg.png) no-repeat center;
}
header {
	background-color: @col-primary;
	.clearfix();
	.box-shadow(0 5px 10px @col-shadow);
	#logo{  
		#hdr-logo(@col-primary);	
		width: 360px;
		height: 90px;
		float: left;
	}
	nav
	{
		clear: left;
		background-color: @col-bg-navigation;
		font-size: 1.3em;
	    font-weight: 600;
		padding: 10px 0 10px 10px;

		li 
		{
	        display: inline;
	        list-style: none;
			a {
				padding: 0 10px;
	            color: @col-font-on-navigation;
	            text-decoration: none;
				&:hover 
				{
						background-color: @col-complementary-1;
					    color: @col-font-on-complementary-1;
					    text-decoration: none;
				}
	        }
			.active
			{
				padding: 0 10px;
	            color: @col-font-on-complementary-1;
				background-color: @col-complementary-1;
				cursor: default;
			}
	    }
	}
}
#content
{
	.clearfix();
	.box-shadow(0 5px 10px @col-shadow);
	background: @col-bg-content;
	z-index: 2;
	padding: 20px;
	min-height: 400px;
	#main
	{
		float: left;
		width: 100%;
	}
}
footer 
{
	.center-block();
	padding: 1em;
    text-align: center;
	background-color: @col-bg-footer;
	.box-shadow(0 5px 10px @col-shadow);
	z-index: 0;
	font-weight: bold;
}